<template>
	<view class="content">
		<!-- <view style="height: 20rpx;"></view>
		<view class="wid90 mar borRad20 bacFFF foSi30">
			<view class="wid90 mar hei80 dis disAl">
				<view style="width: 35%;">姓名：</view>
				<input style="width: 65%;" class="foSi25" v-model="name" placeholder="请输入您的姓名" />
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar hei80 dis disAl">
				<view style="width: 35%;">联系电话：</view>
				<input type="number" style="width: 65%;" class="foSi25" v-model="phone" placeholder="请输入您的联系电话" />
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar hei80 dis disAl">
				<view style="width: 35%;">收货地址：</view>
				<picker mode="region" class="foSi25" style="width: 65%;" @change="districtChange" :value="date">
					<view v-if="city">{{city}}</view>
					<view v-if="!city" class="wid100 dis disAl" style="height: 80rpx;color: #8A8A8A;">请选择负责区域</view>
				</picker>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar hei80 dis disAl">
				<view style="width: 35%;">详细地址：</view>
				<input style="width: 65%;" class="foSi25" v-model="address" placeholder="请输入详细收货地址" />
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar hei80 dis disAl" style="justify-content: flex-end;">
				<view class="foSi25 coFFF borRad10 dis disAl disJuC"
					style="background-color: #1262DB;width: 141rpx;height: 50rpx;">切换地址</view>
			</view>
			<view class="xhx"></view>
			<view class="wid90 mar hei80 dis disAl disJuB">
				<view>包裹（{{pronum}}件）</view>
				<view style="color: #1262DB;font-weight: 600;">{{arrival_time}}</view>
			</view>
			<view v-for="(item,index) in list" :key="index" class="wid90 mar dis disAl disJuB foSi25 mar-bott20">
				<view class="dis disAl">
					<image :src="url+item.coverimg" style="width: 106rpx;height: 106rpx;" class="borRad50"></image>
					<view class="mar-left20">
						<view>{{item.name}}</view>
						<view class="mar-top10">￥{{item.price}}/盒</view>
					</view>
				</view>
				<view>x{{item.num}}</view>
			</view>
			<view class="xhx mar-bott10"></view>
			<view class="wid90 mar hei60 dis disAl disJuB">
				<view class="dis disAl" style="font-weight">
					<image src="../../static/purchase/yixuan.png" style="width: 20rpx;height: 20rpx;">
					</image>
					<view class="mar-left20">运费</view>
				</view>
				<view>￥{{freight}}</view>
			</view>
			
			<view class="xhx mar-top10"></view>
			<view class="wid90 mar hei80 dis disAl disJuB" style="font-weight: 600;">
				<view>合计：</view>
				<view style="color: #ff0000;">¥{{pro_price}}</view>
			</view>
			<view class="xhx mar-bott20"></view>
			<view class="wid90 mar hei60 dis disAl disJuB" @click="zhifuTrue = !zhifuTrue">
				<view class="dis disAl" :style="zhifuTrue?'font-weight: 600;':'color: #696969;'">
					<image v-if="!zhifuTrue" src="../../static/purchase/weixuan.png"
						style="width: 20rpx;height: 20rpx;"></image>
					<image v-if="zhifuTrue" src="../../static/purchase/yixuan.png" style="width: 20rpx;height: 20rpx;">
					</image>
					<view class="mar-left20">押金支付</view>
				</view>
				<view>可用押金金额：0</view>
			</view>
			<view class="wid90 mar hei60 dis disAl" @click="zhifuTrue = !zhifuTrue">
				<view class="dis disAl" :style="!zhifuTrue?'font-weight: 600;':'color: #696969;'">
					<image v-if="zhifuTrue" src="../../static/purchase/weixuan.png" style="width: 20rpx;height: 20rpx;">
					</image>
					<image v-if="!zhifuTrue" src="../../static/purchase/yixuan.png" style="width: 20rpx;height: 20rpx;">
					</image>
					<view class="mar-left20">微信支付</view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
			<view class="wid90 mar hei80 wid100 dis disAl disJuC coFFF foSi40 borRad20"
				style="background-color: #1262DB;" @click="tijiao">提交</view>
			<view style="height: 50rpx;"></view>
			<view class="wid80 mar foSi20" style="color: #ff0000;">{{product_tips}}</view>
			<view style="height: 50rpx;"></view>
		</view> -->
	</view>
</template>

<script>
	var md5 = require('../../components/md5.js')
	export default {
		data() {
			return {
				url: this.global.url,
				prolist: '',
				list: [],
				pronum: '',
				product_tips: '',
				freight: '',
				pro_price: '',
				arrival_time: '',
				name: '',
				phone: '',
				city: '',
				address: '',
				zhifuTrue: true
			}
		},
		onLoad(options) {
			this.prolist = options.prolist
			this.goumai()
		},
		methods: {
			tijiao() {
				var that = this
				if (that.name == '') {
					uni.showToast({
						title: '请输入姓名',
						icon: 'error'
					})
					return
				}
				let reg = /^[1][2,3,4,5,7,8,9][0-9]{9}$/ //正则表达式定义手机号正确格式
				if (!reg.test(that.phone)) { //判断手机号格式时候正确
					uni.showToast({
						title: '请输入正确联系电话',
						icon: 'error'
					})
					return
				}
				if (that.city == '') {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'error'
					})
					return
				}
				if (that.address == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'error'
					})
					return
				}
				uni.request({
					url: that.global.url + 'api/proorder/creatorder',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						pay_type: this.zhifuTrue ? 2 : 1,
						prolist: this.prolist,
						user_name: this.name,
						user_phone: this.phone,
						user_city: this.city,
						user_address: this.address
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							if (result.data.pay_status == 1) {
								uni.showToast({
									title: '支付成功',
								})
								uni.navigateBack({
									delta: 2
								})
							} else {
								if (result.data.pay_type == 1) {
									if (result.data.payinfo.code != 1) {
										console.log(result.data)
										let pay_key = result.data.pay_key
										console.log(pay_key)
										// return false;
										//obj里面的key一定要是驼峰名称
										let obj = {
											appId: result.data.payinfo.appid,
											nonceStr: result.data.payinfo.noncestr,
											package: "prepay_id=" + result.data.payinfo.package,
											signType: 'MD5',
											timeStamp: result.data.payinfo.timestamp
										}
										//参数名ASCII码从小到大排序（字典序）
										let arr = Object.keys(obj).sort().map(item => {
											return `${item}=${obj[item]}`;
										});
										//最后拼接上key（商户密钥）得到字符串
										let str = arr.join('&') + '&key=' + pay_key;
										console.log(str);
										//对str进行MD5运算，再将得到的字符串所有字符转换为大写
										console.log(result.data.payinfo.timestamp)
										let paySign = md5.hexMD5(str).toUpperCase()
										wx.requestPayment({
											timeStamp: result.data.payinfo.timestamp.toString(),
											nonceStr: result.data.payinfo.noncestr,
											package: "prepay_id=" + result.data.payinfo.package,
											signType: 'MD5',
											paySign: paySign,
											success: function(res) {
												// 支付成功
												uni.showModal({
													title: '提示',
													content: '支付成功',
													showCancel: false,
													success: function(res) {
														if (res.confirm) {
															uni.navigateBack({
																delta: 2
															})
														}
													}
												})
											},
											fail: function(res) {
												// 支付失败
												console.log(res)
												uni.showToast({
													title: '支付失败',
													icon: 'none'
												})
											}
										})
									} else {
										uni.showToast({
											title: result.data.payinfo.msg,
											icon: 'error'
										})
									}
								} else {
									uni.showToast({
										title: result.msg,
										icon: 'error'
									})
								}
							}
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}

					}
				})
			},
			districtChange(e) {
				this.city = e.detail.value[0] + '-' + e.detail.value[1] + '-' + e.detail.value[2]
			},
			goumai() {
				var that = this
				uni.request({
					url: that.global.url + 'api/proorder/confirm_order',
					method: "POST",
					header: {
						'token': uni.getStorageSync('token')
					},
					data: {
						prolist: this.prolist
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.list = result.data.prolist
							that.pronum = result.data.pronum
							that.product_tips = result.data.product_tips
							that.freight = result.data.freight
							that.pro_price = result.data.pro_price
							that.arrival_time = result.data.arrival_time
						} else {
							uni.showToast({
								title: result.msg,
								icon: 'error'
							})
						}

					}
				})
			}
		}
	}
</script>

<style>
	.content {
		min-height: 100vh;
		background-color: #1262DB;
	}
</style>